<template>
	<view class="datail">
		<scroll-view scroll-y="true" enable-flex>
			<!-- 轮播图 -->
			<view class="banner">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item class="swiItem">
						<view class="swiperItem">
							<image class="bannerImg" src="../../../../static/mylove.jpg" mode=""></image>
						</view>
					</swiper-item>
					
					<swiper-item>
						<view class="swiperItem">
							<image class="bannerImg" src="../../../../static/mylove.jpg" mode=""></image>
						</view>
					</swiper-item>
					
				</swiper>
			</view>
			<view class="info_price">$128</view>
			
			<view class="name">
				<text class="info_name">2222222222222222222wwwww顶顶顶顶顶顶顶顶顶顶</text>
				<view class="info_coll">
					<text class="iconfont icon-shoucang1"></text>
					<!-- <image class="info_icon" src="../../../../static/mylove.jpg" mode=""></image> -->
					<view class="info_text">收藏</view>
				</view>
			</view>
			
			<view class="more_title">图文详情</view>
			<view class="rich_text">
				<image class="richImg"src="../../../../static/mylove.jpg" mode=""></image>
			</view>
			
			<view class="btm_tool">
				<view class="tool_item">
					<view class="iconfont icon-kefu"></view>
					<text class="tool_text">客服</text>
				</view>
				
				<view class="tool_item">
					<view class="iconfont icon-yixianshi-"></view>
					<text class="tool_text">分享</text>
				</view>
				
				<view class="tool_item">
					<view class="iconfont icon-gouwuche"></view>
					<text class="tool_text">购物车</text>
				</view>
				
				<view class="btn_cart">
					<view class="cart">加入购物车</view>
				</view>
				
				<view class="btn_red">
					<view class="red">立即购买</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
			goods_id:''
			}
		},
		onload(option){
				console.log(option.goods_id)
			},
		mounted() {
			this.getdata()
		},
		methods:{
			getdata(){
				this.$store.dispatch('datail/getdatail')
			}
		},
		computed:{
			...mapState('datail',['datailList'])
		},
		
	}
</script>

<style lang="stylus">
	.datail
		height: 100%
		.banner
			.swiItem
				width: 100%
				height: 526upx
			.swiperItem
				display: flex
				justify-content: center
				align-items: center
				.bannerImg
					width: 50%
					height: 450upx
		.info_price
			width: 100%
			height: 72upx
			color: #EB4450
			font-size: 40upx
			padding: 10upx
			font-weight: bold
		.name
			width: 100%
			display: flex
			border-bottom: 4upx solid #ddd
			.info_name
				display: flex
				white-space: pre-wrap
				font-size: 26upx
				width: 622upx
				height: 74upx
				border-right: 4upx solid #000000
			.info_coll
				display: flex
				flex-direction: column;
				align-items: center;
				justify-content: center;
				flex: 1
				.info_icon
					width: 32upx
					height: 32upx
				.info_text
					font-size: 24upx
		.more_title
			width: 100%
			height: 68upx
			font-weight: bold
			color: #EB4450
			padding: 10upx
		.rich_text
			.richImg
				width: 100%
				height: 13000upx
		.btm_tool
			display: flex
			width: 100%
			height: 90upx
			.tool_item
				display: flex
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 106upx
				height: 88upx
				.tool_text
					font-size: 20upx
			.btn_cart
				display: flex
				width: 214upx
				height: 88upx
				background-color:#FFA500
				.cart
					margin: auto
					font-weight: bold
					font-size: 30upx
					color: #ffffff
			.btn_red
				display: flex
				width: 214upx
				height: 88upx
				background-color: #EB4450
				.red
					margin: auto
					font-weight: bold
					color: #ffffff
					font-size: 30upx 
</style>
